:root {
    --tech-dark-bg: #121212;
    --tech-slate-gradient: linear-gradient(135deg, #121212 0%, #16222f 100%);
    --electric-blue: #00D2FF;
    --product-body-bg: #ffffff;
    --card-light-bg: #f4f6f9;
}

header {
    background: linear-gradient(135deg, #121212 0%, #1c2833 100%);
}

footer {
    background: #121212;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(61%) sepia(80%) saturate(1914%) hue-rotate(164deg) brightness(101%) contrast(105%);
}

.category-btn {
    background-color: var(--electric-blue) !important;
}

.navbar-brand {
    color: var(--electric-blue) !important;
}

.badge {
    background-color: var(--electric-blue) !important;
}

.card {
    background-color: var(--card-light-bg) !important;
}

.navbar {
    background-color: var(--tech-dark-bg) !important;
}

i {
    color: var(--electric-blue) !important;
}

/*Navbar Stabilization CSS*/
/* 1. Force the webpage to cleanly trim any hidden horizontal overflows */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 2. Stabilize the sticky navigation layout across fluid window dimensions */
header.sticky-top {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
}

/* Proucts Section CSS */
.custom-sort-dropdown:focus {
    border-color: #00D2FF !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 210, 255, 0.25) !important;
}

.custom-checkbox:checked {
    background-color: #00D2FF !important;
    border-color: #00D2FF !important;
}

.custom-input:focus {
    border-color: #00D2FF !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 210, 255, 0.25) !important;
}

.product-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06) !important;
}

.quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    width: max-content;
}

.qty-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.qty-btn:hover {
    background-color: #f5f5f5;
}

/* Hides default HTML spinner arrows */
.qty-input {
    width: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size: 1rem;
    padding: 8px 0;

}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Active State (When clicked) */
.add-to-cart-btn:active {
    background-color: #0097a7;
    /* Even darker cyan for instant click feedback */
    transform: scale(0.98);
    /* Subtle click shrink effect assessors love */
}

/* About Us Section CSS */
body {
    background-color: #f8f9fa;
}

.text-brand-blue {
    color: var(--electric-blue);
}

.bg-brand-blue {
    background-color: #002dff;
}

.value-card {
    border: none;
    border-radius: 12px;
    background-color: #ffffff;
    transition: transform 0.2s ease;
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06) !important;
}